<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2024-11-20 17:51:07
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-03-06 10:40:19
 * @FilePath: /XMate-h5/src/views/myXmate/components/teamVisitorFilter.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <visitorFilter
    ref="visitFilterRef"
    :defaultDateRange="defaultDateRange"
    @onConfirm="onConfirmFilter"
  >
    <div
      class="flex flex-row px-0 pt-2 justify-between items-center"
      @click="showChoosePeople = true"
    >
      <p class="text-sm font-medium text-gray-900">销售</p>
      <div class="text-xs text-[#8C8C8C]">
        {{ cp_salesPersonArr }}
        <van-icon name="arrow" />
      </div>
    </div>

    <chooseTeamView
      ref="chooseTeamViewRef"
      :selectItems="selectTeams"
      @onConfirm="onConfirmTeam"
    />

    <van-action-sheet v-model:show="showChoosePeople" title="销售筛选">
      <div class="h-[680px]">
        <choosePeopleView @confirm="onConfirmPeople" />
      </div>
    </van-action-sheet>
  </visitorFilter>
</template>

<script setup>
import { ref, computed, defineExpose, defineEmits, defineProps } from "vue";
import choosePeopleView from "@/components/choosePeople/choosePeopleView.vue";
import visitorFilter from "./visitorFilter.vue";
import chooseTeamView from "./chooseTeamView.vue";

const emits = defineEmits(["onConfirm"]);
const selectTeams = ref([]);

// const cp_selectTeamDes = computed(() => {
//   if (selectTeams.value.length === 0) {
//     return "请选择";
//   }
//   let firstItem = selectTeams.value[0];
//   return firstItem.name;
// });

defineProps({
  defaultDateRange: {
    type: Array,
    default: () => []
  }
});

const cp_salesPersonArr = computed(() => {
  return selectPeoples.value.map(v => v.name).join(",");
});

const chooseTeamViewRef = ref();
function onSelectTeam() {
  chooseTeamViewRef.value.show();
}

const visitFilterRef = ref();
function show() {
  console.log(" visitFilterRef show :", visitFilterRef.value);
  visitFilterRef.value.show();
}

function hide() {
  visitFilterRef.value.hide();
}

function onConfirmTeam(teams) {
  selectTeams.value = teams;
}

const showChoosePeople = ref(false);
const selectPeoples = ref([]);
function onConfirmPeople(data) {
  console.log("onConfirmPeople", data);
  selectPeoples.value = data;
  showChoosePeople.value = false;
}

function onConfirmFilter(parameter) {
  parameter.dptIds = selectTeams.value.map(v => v.id);
  parameter.userIds = selectPeoples.value.map(v => v.id);
  emits("onConfirm", parameter);
}

defineExpose({
  show,
  hide
});
</script>

<style lang="less" scoped></style>
